

@import 'rem';
@import 'commons';

$vw_design: 750;
html {
  font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw; 
  // 同时，通过Media Queries 限制根元素最大最小值
  @media screen and (max-width: 320px) {
      font-size: 64px;
  }
  @media screen and (min-width: 540px) {
      font-size: 108px;
  }
}

@function px($px) {
  @return ($px / 2 ) * 1px;
}

// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
    max-width: 540px;
    min-width: 320px;
}

.activity{

  &_parent{
    position: relative;
    color:red;
    background-color: #EDDCC0;
  }

  &_child_part{

  }

}

// 雪碧图设置
.index_sprite{
  background-image: url("../img/index_sprites.png") ;
  // background-size: 726px 597.5px;
  background-size: rem(726*2) rem(597.5*2);
}
.egg_btns_sprite{
  background-image: url("../img/btn_sprites.png") ;
  background-size: rem(531) rem(181);
}

.egg_animate_sprite{
  background-image: url("../img/animation.png") ;
  background-size: rem(2256) rem(2000);
}

// 摇蛋动效
@keyframes drawEgg{
  0%{ background-position: rem(-2) rem(-0); }
  8%{ background-position: rem(-559) rem(-0);}

  16%{ background-position: rem(-19) rem(-388);}
  24%{ background-position: rem(-566) rem(-388); }
  32%{ background-position: rem(-1127) rem(-0); }

  40%{ background-position: rem(-0) rem(-760); }
  48%{ background-position: rem(-549) rem(-781); }
  56%{ background-position: rem(-1146) rem(-790); }

  64%{ background-position: rem(-36) rem(-1230); }
  72%{ background-position: rem(-600) rem(-1230); }
  80%{ background-position: rem(-1150) rem(-1230); }

  91%{ background-position: rem(-1690) rem(-0); }
  100%{ background-position: rem(-2) rem(-0); }
}

// 下蛋动效
@keyframes eggFall{
  
  0% {
    transform: translate(-50%,-100%);
    bottom: 100%;
  }
  36% {
    bottom: 0;
  }
  37% {
    transform: translateX(-50%) scale(1.2,.9);
    bottom: 0;
  }
  // 变宽变矮
  44% {
    transform: translateX(-50%) scale(1.2,.9);
    bottom: 0;
  }
  // 变高变窄，弹起来
  78% {
    transform: translateX(-50%) scale(.9,1.1);
    bottom: rem(32);
  }
  100% {
    transform: translateX(-50%);
    bottom: 0;
  }
}

// 星星闪烁
@keyframes bling{
  from {
    transform: scale(0,0);
  }
  to{
    transform: scale(1,1);
  }
}

// 扭蛋机 
.activity_egg_machine{

  position: relative;

  &.drawing{
    .egg_stack{
      animation:drawEgg  1s  step-start;
    }
    .egg_cave .s_egg_item{
      animation: eggFall 1s linear ;
      animation-delay: 1s;
      animation-fill-mode: forwards;
    }
  }

  // 整个机器
  .egg_machine{
    height: rem(1036);
    width: 100%;
    @extend .index_sprite;
    background-position: rem(-6) rem(-6);
  }

  // 蛋堆
  .egg_stack{
    position: absolute;
    width: rem(564);
    height: rem(401);
    left: rem(93);
    top: rem(231);
    @extend .egg_animate_sprite;
    
    background-position: rem(-2) rem(-0);
    // background-position: rem(-559) rem(-0);

    // background-position: rem(-19) rem(-388);
    // background-position: rem(-566) rem(-389);
    // background-position: rem(-1181+55) rem(-0);

    // background-position: rem(-0) rem(-760);
    // background-position: rem(-574+15) rem(-781);
    // background-position: rem(-1166+20) rem(-790);

    // background-position: rem(-66+30) rem(-1230);
    // background-position: rem(-600) rem(-1230);
    // background-position: rem(-1150) rem(-1230);

    // background-position: rem(-1690) rem(-0);

    &.drawing{
      animation:drawEgg  1s  step-start infinite;
      -webkit-animation:drawEgg  1s  step-start infinite; /* Safari 和 Chrome */
    }

  }

  // 蛋堆的阴影
  .egg_stack_shadow{
    
    position: absolute;
    width: rem(566);
    height: rem(81);
    left: rem(93);
    bottom: rem(397);
    @extend .index_sprite;
    background-position: rem(-764) rem(-568);

  }

  // 点击获取蛋的按钮
  .get_egg_btn{
    position: absolute;
    top: rem(740);
    left: rem(164);
    width: rem(177);
    height: rem(180);
    @extend .egg_btns_sprite;
    background-position: rem(-354) rem(-0);

    &:active{
      background-position-x: rem(-177);
    }

    &.disabled{
      background-position-x:  rem(-1);
    }
    &.active{
      background-position-x: rem(-177);
    }
  }

  // 出蛋的洞口
  .egg_cave{
    position: absolute;
    top: rem(828);
    right: rem(164);
    width: rem(188);
    height: rem(162);
    overflow: hidden;
    @extend .index_sprite;
    // display: none;
    background-position: rem(-404) rem(-833);

    .s_egg_item{
      position: absolute;
      left: 50%;
      transform: translate(-50%,-100%);
      bottom: 100%;
    }

  }

}

// 我的奖品
.activity_my_reward{

  margin-bottom: rem(80);
  padding-top: rem(32);

  .lucky_nums{
    position: relative;
    width: rem(432);
    height:rem(110);
    @extend .index_sprite;
    background-position: rem(-382*2) rem(-328*2) ;
    margin: 0 auto;
    // margin-bottom: 11px;
    margin-bottom: rem(22);
  }
  .lucky_num{
    position: absolute;
    top: rem(28);
    right: rem(116);
    height: rem(58);
    width: rem(43);
    @extend .index_sprite;
    background-position: rem(-776) rem(-940);

    &[type="one"]{
      background-position: rem(-513-854) rem(-663);
    }
    &[type="two"]{
      background-position: rem(-778) rem(-940);
    }
    &[type="three"]{
      background-position-x: rem(-857) ;
    }
    &[type="four"]{
      width: rem(48);
      right: rem(112);
      background-position-x: rem(-933) ;
    }
    &[type="five"]{
      background-position-x: rem(-1012) ;
    }
    &[type="six"]{
      width: rem(46);
      right: rem(114);
      background-position-x: rem(-1089) ;
    }
    &[type="zero"]{
      width: rem(48);
      right: rem(112);
      background-position: rem(-491-860) rem(-508);
    }
  }
  .buy_lesson{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    text-align: center;
    // margin-bottom: 60px;
    margin-bottom: rem(120);
    font-size: 0;
    &_btn{
      display: block;
      // width: 182px;
      // height:17px;
      width: rem(364);
      height: rem(34);
      @extend .index_sprite;
      background-position: rem(-385*2) rem(-393*2) ;
      // background-position: -385px -393px;
    }
    &_arrow{
      display: block;
      // display: inline-block;
      // width: 14px;
      // height:14px;
      // margin-left: 4px;
      height: rem(28);
      width: rem(28);
      margin-left:rem(8);
      margin-top: rem(0.5);
      @extend .index_sprite;
      background-position:rem(-1416) rem(-584) ;
    }
  }
  .reward{
    &_part{
      position: relative;
      width: rem(680);
      margin: 0 auto;

      &_header{
        display: block;
        height: rem(155);
        width: 100%;
        @extend .index_sprite;
        background-position: rem(-764) rem(-180);
      }
      &_footer{
        display: block;
        height: rem(155);
        width: 100%;
        @extend .index_sprite;
        background-position: rem(-764) rem(-180);
        transform: rotateX(180deg);
      }
    }
    &_empty{
      text-align: center;
      font-size: rem(30);
      color: #685b49;
    }
    &_content{
      background-color:#FFFFFF ;
      padding-top: rem(5);
    }
    &_title{
      position: absolute;
      left: 50%;
      top: rem(-38);
      transform: translateX(-50%);
      // top: -22px;
      // width: 210px;
      // height: 49px;
      height: rem(98);
      width: rem(420);
      @extend .index_sprite;
      background-position: rem(-762) rem(-824) ;

    }
    &_iconbox{
      position: absolute;
      height: rem(146);
      width: rem(130);
      top: rem(-24);
      right:rem(-35);
      @extend .index_sprite;
      background-position: rem(-450-764) rem(-656);

    }
    &_list{
      padding-left: rem(40);
      padding-right: rem(76) ;
      padding-bottom: rem(60);
    }
    &_item{
      display: flex;
      font-size: rem(26);
      color: #685b49;
      line-height: 1.2;
      margin-bottom: rem(36);

      &>p:nth-child(2){
        margin: 0 rem(40);
      }

      &>p:last-child{
        flex: 1;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }

      &:last-child{
        margin-bottom: 0;
      }
    }
    &_btn{
      // @extend .btns_sprite;
      // height: rem(90);
      // width: rem(442);
      // background-position: rem(-5) rem(-8);
      // @extend .get_reward_btn_writeAdress;
      position: absolute;
      left: 50%;
      bottom: rem(60);
      z-index: 1;
      transform: translateX(-50%);
      margin: 0 auto;
      // &.active{
      //   background-position: rem(-5) rem(-109);
      // }
    }
  }
}

// 活动规则
.activity_rules{

  position: relative;
  &_content{
    width: rem(680);
    margin: 0 auto;
    padding-bottom: rem(80);
  }

  &_header{
    display: block;
    height: rem(173);
    width: 100%;
    @extend .index_sprite;
    background-position: rem(-764) rem(-3);
  }

  &_footer{
    display: block;
    height: rem(148);
    width: 100%;
    @extend .index_sprite;
    background-position: rem(-764) rem(-344);
  }

  &_title{
    position: absolute;
    top: rem(72);
    left: 50%;
    z-index: 1;
    transform: translateX(-50%);
    height: rem(48);
    width: rem(218);
    @extend .index_sprite;
    background-position: rem(-1186) rem(-828);
  }


  &_list{
    padding: 0 rem(40);
    padding-top: rem(7);
    background-color: #F5EDE0;
    margin-bottom: rem(-68);
    border-radius:  0 0 rem(60) rem(60);
  }

  &_item{
    display: flex;
    font-size: rem(32);
    line-height: rem(50);
    color: #685B49;
    margin-bottom: rem(32);
    &:last-child{
      margin-bottom: 0;
      .activity_rules_text{
        border: none;
        padding-bottom: 0;
      }
    }
  }

  &_num{
    height: rem(40);
    width: rem(40);
    margin-right: rem(16);
    @extend .index_sprite;
    background-position-y:  rem(-884);
    margin-top: rem(4);

    &.one{
      background-position-x: rem(-1192);
    }
    &.two{
      background-position-x: rem(-762-480);
    }
    &.third{
      background-position-x: rem(-762-530);
    }
    &.forth{
      background-position-x: rem(-762-580.5);
    }
  }

  &_text{
    flex:1;
    // letter-spacing: rem(1);
    padding-bottom: rem(32);
    border-bottom: rem(4) dashed  #eddcc0;
    
  }

}

// 中奖信息轮播
.reward_info{
  position: absolute;
  top:rem(260) ;
  left: rem(10);
  background-color: rgba(0, 0, 0, .7);
  border-radius: rem(50);
  height: rem(80);
  overflow: hidden;

  &_list{

  }
  &_item{
    display: flex;
    align-items: center;
    // height: auto!important;
    padding:rem(10);
    box-sizing: border-box;
  }
  &_avatar{
    background-color: #999;
    width: rem(50);
    height: rem(50);
    margin-right: rem(10);
    border-radius: 100%;
  }
  &_text{
    width: rem(200);
    color: #FFFFFF;
    line-height: rem(28);
    font-size: rem(16);
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

// 遮罩层
.modal_shadow{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.reward_modal{
  display: none;
  
  &.opening{

    .egg_item_animate_top{
      bottom: rem(726);
      // 因为蛋盖一开始的 zindex 要大于蛋底，但是蛋底的纸又要覆盖蛋盖，所以在动画开始的时候，把 zindex 减小
      z-index: 3;
    }

    .egg_item_animate_paper{
      bottom: rem(230);
    }
    
    .bbling{
      animation: bling .5s infinite alternate;
    }

  }
  
  .bling_left{
    position: fixed;
    left: rem(10);
    bottom: rem(250+340);
    z-index: 2;
    width: rem(40);

    .bbling_bluehole{
      right: rem(-35);
      top: rem(-320);
    }
    .bbling_sstar{
      right: rem(-0);
      top: rem(-250);
      animation-delay: .2s;
    }
    .bbling_bstar{
      right: rem(-55);
      top: rem(-160);
    }
    .bbling_syellowhole{
      right: rem(-15);
      top: rem(-60);
    }
    .bbling_semptyhole{
      right: rem(-20);
      top: rem(-0);
      animation-delay: .2s;
    }
  }

  .bling_right{
    position: fixed;
    right: rem(10);
    z-index: 2;
    bottom: rem(250+340);
    width: rem(40);
    
    .bbling_bstar{
      right: rem(10);
      top: rem(-320);
    }
    .bbling_redhole{
      left: rem(-50);
      top: rem(-220);
      animation-delay: .2s;
    }
    .bbling_bemptyhole{
      right: rem(10);
      top: rem(-180);
    }
    .bbling_sstar{
      left: rem(-50);
      top: rem(-80);
      animation-delay: .2s;
    }
    .bbling_byellowhole{
      left: rem(-15);
      top: rem(-0);
    }
  }
}

// 奖品信息弹窗
.reward_modal_content{
  
  z-index: 2;

  .egg_item_animate{

    &.opening{
  
      .egg_item_animate_top{
        bottom: rem(726);
        // 因为蛋盖一开始的 zindex 要大于蛋底，但是蛋底的纸又要覆盖蛋盖，所以在动画开始的时候，把 zindex 减小
        z-index: 3;
      }
  
      .egg_item_animate_paper{
        bottom: rem(230);
      }
  
    }

    .transparent_box{
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      height: rem(700);
      width: rem(460);
      border-radius:  0 0 100% 100%;
      z-index: 3;
      background-color: transparent;
      bottom: rem(250);
      overflow: hidden;
    }
    &_paper{
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: rem(-150);
      transition: bottom 1s;
      transition-delay: .5s;
    }
    &_mid{
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: rem(476);
      z-index: 2;
    }
    &_top{
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: rem(478);
      transition: bottom 1s;
      z-index: 5;
      // transition-delay: 2.5s;
    }
    &_bottom{
      position: fixed;
      left: 50%;
      bottom: rem(250);
      z-index: 4;
      transform: translateX(-50%);
    }
  }

  .get_reward_btn{
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: rem(100);
    z-index: 2;
  }


}

// 提示窗口
.toast{
  display: none;
  position: fixed;
  bottom: rem(250);
  left: 50%;
  transform: translateX(-50%);
  background-color:rgba(0, 0, 0, 0.7);
  color: #FFFFFF;
  font-size: rem(30);
  padding: rem(15) rem(60);
  border-radius:rem(40);
  z-index: 10;
  width: rem(300);
  text-align: center;
}